payload-richtext-tiptap 0.0.55 → 0.0.56
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/fields/TiptapEditor/extensions/Audio/Audio.d.ts +52 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/Audio.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/Audio.js +81 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/Audio.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/index.d.ts +2 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/index.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/index.js +3 -0
- package/dist/src/fields/TiptapEditor/extensions/Audio/index.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.d.ts +26 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.js +118 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.d.ts +5 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.js +155 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockView.d.ts +33 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockView.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockView.js +39 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockView.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockWidth.d.ts +7 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockWidth.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockWidth.js +39 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockWidth.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/index.d.ts +2 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/index.d.ts.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/index.js +3 -0
- package/dist/src/fields/TiptapEditor/extensions/AudioBlock/index.js.map +1 -0
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.d.ts +1 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.js +2 -1
- package/dist/src/fields/TiptapEditor/extensions/extension-kit.js.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/index.d.ts +1 -0
- package/dist/src/fields/TiptapEditor/extensions/index.d.ts.map +1 -1
- package/dist/src/fields/TiptapEditor/extensions/index.js +1 -0
- package/dist/src/fields/TiptapEditor/extensions/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { Node } from "@tiptap/core";
|
|
2
|
+
export interface AudioOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Controls if the image node should be inline or not.
|
|
5
|
+
* @default false
|
|
6
|
+
* @example true
|
|
7
|
+
*/
|
|
8
|
+
inline: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Controls if base64 images are allowed. Enable this if you want to allow
|
|
11
|
+
* base64 image urls in the `src` attribute.
|
|
12
|
+
* @default false
|
|
13
|
+
* @example true
|
|
14
|
+
*/
|
|
15
|
+
allowBase64: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* HTML attributes to add to the image element.
|
|
18
|
+
* @default {}
|
|
19
|
+
* @example { class: 'foo' }
|
|
20
|
+
*/
|
|
21
|
+
HTMLAttributes: Record<string, any>;
|
|
22
|
+
}
|
|
23
|
+
declare module "@tiptap/core" {
|
|
24
|
+
interface Commands<ReturnType> {
|
|
25
|
+
audio: {
|
|
26
|
+
/**
|
|
27
|
+
* Add an image
|
|
28
|
+
* @param options The image attributes
|
|
29
|
+
* @example
|
|
30
|
+
* editor
|
|
31
|
+
* .commands
|
|
32
|
+
* .setAudio({ src: 'https://tiptap.dev/logo.png', alt: 'tiptap', title: 'tiptap logo' })
|
|
33
|
+
*/
|
|
34
|
+
setAudio: (options: {
|
|
35
|
+
src: string;
|
|
36
|
+
alt?: string;
|
|
37
|
+
title?: string;
|
|
38
|
+
poster?: string;
|
|
39
|
+
}) => ReturnType;
|
|
40
|
+
};
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* Matches an image to a  on input.
|
|
45
|
+
*/
|
|
46
|
+
export declare const inputRegex: RegExp;
|
|
47
|
+
/**
|
|
48
|
+
* This extension allows you to insert images.
|
|
49
|
+
* @see https://www.tiptap.dev/api/nodes/image
|
|
50
|
+
*/
|
|
51
|
+
export declare const Audio: Node<AudioOptions, any>;
|
|
52
|
+
//# sourceMappingURL=Audio.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Audio.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/Audio/Audio.ts"],"names":[],"mappings":"AAAA,OAAO,EAAmB,IAAI,EAAiB,MAAM,cAAc,CAAC;AAEpE,MAAM,WAAW,YAAY;IAC3B;;;;OAIG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,WAAW,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,cAAc,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACrC;AAED,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,KAAK,EAAE;YACL;;;;;;;eAOG;YACH,QAAQ,EAAE,CAAC,OAAO,EAAE;gBAClB,GAAG,EAAE,MAAM,CAAC;gBACZ,GAAG,CAAC,EAAE,MAAM,CAAC;gBACb,KAAK,CAAC,EAAE,MAAM,CAAC;gBACf,MAAM,CAAC,EAAE,MAAM,CAAC;aACjB,KAAK,UAAU,CAAC;SAClB,CAAC;KACH;CACF;AAED;;GAEG;AACH,eAAO,MAAM,UAAU,QACqC,CAAC;AAE7D;;;GAGG;AACH,eAAO,MAAM,KAAK,yBAiFhB,CAAC"}
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
import { mergeAttributes, Node, nodeInputRule } from "@tiptap/core";
|
|
2
|
+
/**
|
|
3
|
+
* Matches an image to a  on input.
|
|
4
|
+
*/ export const inputRegex = /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/;
|
|
5
|
+
/**
|
|
6
|
+
* This extension allows you to insert images.
|
|
7
|
+
* @see https://www.tiptap.dev/api/nodes/image
|
|
8
|
+
*/ export const Audio = Node.create({
|
|
9
|
+
name: "audio",
|
|
10
|
+
addOptions () {
|
|
11
|
+
return {
|
|
12
|
+
inline: false,
|
|
13
|
+
allowBase64: false,
|
|
14
|
+
HTMLAttributes: {}
|
|
15
|
+
};
|
|
16
|
+
},
|
|
17
|
+
inline () {
|
|
18
|
+
return this.options.inline;
|
|
19
|
+
},
|
|
20
|
+
group () {
|
|
21
|
+
return this.options.inline ? "inline" : "block";
|
|
22
|
+
},
|
|
23
|
+
draggable: true,
|
|
24
|
+
addAttributes () {
|
|
25
|
+
return {
|
|
26
|
+
src: {
|
|
27
|
+
default: null
|
|
28
|
+
},
|
|
29
|
+
alt: {
|
|
30
|
+
default: null
|
|
31
|
+
},
|
|
32
|
+
title: {
|
|
33
|
+
default: null
|
|
34
|
+
},
|
|
35
|
+
poster: {
|
|
36
|
+
default: null
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
},
|
|
40
|
+
parseHTML () {
|
|
41
|
+
return [
|
|
42
|
+
{
|
|
43
|
+
tag: this.options.allowBase64 ? "audio[src]" : 'audio[src]:not([src^="data:"])'
|
|
44
|
+
}
|
|
45
|
+
];
|
|
46
|
+
},
|
|
47
|
+
renderHTML ({ HTMLAttributes }) {
|
|
48
|
+
return [
|
|
49
|
+
"audio",
|
|
50
|
+
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
|
|
51
|
+
];
|
|
52
|
+
},
|
|
53
|
+
addCommands () {
|
|
54
|
+
return {
|
|
55
|
+
setAudio: (options)=>({ commands })=>{
|
|
56
|
+
return commands.insertContent({
|
|
57
|
+
type: this.name,
|
|
58
|
+
attrs: options
|
|
59
|
+
});
|
|
60
|
+
}
|
|
61
|
+
};
|
|
62
|
+
},
|
|
63
|
+
addInputRules () {
|
|
64
|
+
return [
|
|
65
|
+
nodeInputRule({
|
|
66
|
+
find: inputRegex,
|
|
67
|
+
type: this.type,
|
|
68
|
+
getAttributes: (match)=>{
|
|
69
|
+
const [, , alt, src, title] = match;
|
|
70
|
+
return {
|
|
71
|
+
src,
|
|
72
|
+
alt,
|
|
73
|
+
title
|
|
74
|
+
};
|
|
75
|
+
}
|
|
76
|
+
})
|
|
77
|
+
];
|
|
78
|
+
}
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
//# sourceMappingURL=Audio.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/Audio/Audio.ts"],"sourcesContent":["import { mergeAttributes, Node, nodeInputRule } from \"@tiptap/core\";\n\nexport interface AudioOptions {\n /**\n * Controls if the image node should be inline or not.\n * @default false\n * @example true\n */\n inline: boolean;\n\n /**\n * Controls if base64 images are allowed. Enable this if you want to allow\n * base64 image urls in the `src` attribute.\n * @default false\n * @example true\n */\n allowBase64: boolean;\n\n /**\n * HTML attributes to add to the image element.\n * @default {}\n * @example { class: 'foo' }\n */\n HTMLAttributes: Record<string, any>;\n}\n\ndeclare module \"@tiptap/core\" {\n interface Commands<ReturnType> {\n audio: {\n /**\n * Add an image\n * @param options The image attributes\n * @example\n * editor\n * .commands\n * .setAudio({ src: 'https://tiptap.dev/logo.png', alt: 'tiptap', title: 'tiptap logo' })\n */\n setAudio: (options: {\n src: string;\n alt?: string;\n title?: string;\n poster?: string;\n }) => ReturnType;\n };\n }\n}\n\n/**\n * Matches an image to a  on input.\n */\nexport const inputRegex =\n /(?:^|\\s)(!\\[(.+|:?)]\\((\\S+)(?:(?:\\s+)[\"'](\\S+)[\"'])?\\))$/;\n\n/**\n * This extension allows you to insert images.\n * @see https://www.tiptap.dev/api/nodes/image\n */\nexport const Audio = Node.create<AudioOptions>({\n name: \"audio\",\n\n addOptions() {\n return {\n inline: false,\n allowBase64: false,\n HTMLAttributes: {},\n };\n },\n\n inline() {\n return this.options.inline;\n },\n\n group() {\n return this.options.inline ? \"inline\" : \"block\";\n },\n\n draggable: true,\n\n addAttributes() {\n return {\n src: {\n default: null,\n },\n alt: {\n default: null,\n },\n title: {\n default: null,\n },\n poster: {\n default: null,\n },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: this.options.allowBase64\n ? \"audio[src]\"\n : 'audio[src]:not([src^=\"data:\"])',\n },\n ];\n },\n\n renderHTML({ HTMLAttributes }) {\n return [\n \"audio\",\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n ];\n },\n\n addCommands() {\n return {\n setAudio:\n (options) =>\n ({ commands }) => {\n return commands.insertContent({\n type: this.name,\n attrs: options,\n });\n },\n };\n },\n\n addInputRules() {\n return [\n nodeInputRule({\n find: inputRegex,\n type: this.type,\n getAttributes: (match) => {\n const [, , alt, src, title] = match;\n\n return { src, alt, title };\n },\n }),\n ];\n },\n});\n"],"names":["mergeAttributes","Node","nodeInputRule","inputRegex","Audio","create","name","addOptions","inline","allowBase64","HTMLAttributes","options","group","draggable","addAttributes","src","default","alt","title","poster","parseHTML","tag","renderHTML","addCommands","setAudio","commands","insertContent","type","attrs","addInputRules","find","getAttributes","match"],"mappings":"AAAA,SAASA,eAAe,EAAEC,IAAI,EAAEC,aAAa,QAAQ,eAAe;AA+CpE;;CAEC,GACD,OAAO,MAAMC,aACX,2DAA2D;AAE7D;;;CAGC,GACD,OAAO,MAAMC,QAAQH,KAAKI,MAAM,CAAe;IAC7CC,MAAM;IAENC;QACE,OAAO;YACLC,QAAQ;YACRC,aAAa;YACbC,gBAAgB,CAAC;QACnB;IACF;IAEAF;QACE,OAAO,IAAI,CAACG,OAAO,CAACH,MAAM;IAC5B;IAEAI;QACE,OAAO,IAAI,CAACD,OAAO,CAACH,MAAM,GAAG,WAAW;IAC1C;IAEAK,WAAW;IAEXC;QACE,OAAO;YACLC,KAAK;gBACHC,SAAS;YACX;YACAC,KAAK;gBACHD,SAAS;YACX;YACAE,OAAO;gBACLF,SAAS;YACX;YACAG,QAAQ;gBACNH,SAAS;YACX;QACF;IACF;IAEAI;QACE,OAAO;YACL;gBACEC,KAAK,IAAI,CAACV,OAAO,CAACF,WAAW,GACzB,eACA;YACN;SACD;IACH;IAEAa,YAAW,EAAEZ,cAAc,EAAE;QAC3B,OAAO;YACL;YACAV,gBAAgB,IAAI,CAACW,OAAO,CAACD,cAAc,EAAEA;SAC9C;IACH;IAEAa;QACE,OAAO;YACLC,UACE,CAACb,UACD,CAAC,EAAEc,QAAQ,EAAE;oBACX,OAAOA,SAASC,aAAa,CAAC;wBAC5BC,MAAM,IAAI,CAACrB,IAAI;wBACfsB,OAAOjB;oBACT;gBACF;QACJ;IACF;IAEAkB;QACE,OAAO;YACL3B,cAAc;gBACZ4B,MAAM3B;gBACNwB,MAAM,IAAI,CAACA,IAAI;gBACfI,eAAe,CAACC;oBACd,MAAM,KAAKf,KAAKF,KAAKG,MAAM,GAAGc;oBAE9B,OAAO;wBAAEjB;wBAAKE;wBAAKC;oBAAM;gBAC3B;YACF;SACD;IACH;AACF,GAAG"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/Audio/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/Audio/index.ts"],"sourcesContent":["export * from \"./Audio.js\";\n"],"names":[],"mappings":"AAAA,cAAc,aAAa"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Range } from "@tiptap/core";
|
|
2
|
+
declare module "@tiptap/core" {
|
|
3
|
+
interface Commands<ReturnType> {
|
|
4
|
+
audioBlock: {
|
|
5
|
+
setAudioBlock: (attributes: {
|
|
6
|
+
src: string;
|
|
7
|
+
poster: string;
|
|
8
|
+
assetId: string;
|
|
9
|
+
playlistUrl?: string;
|
|
10
|
+
}) => ReturnType;
|
|
11
|
+
setAudioBlockAt: (attributes: {
|
|
12
|
+
src: string;
|
|
13
|
+
poster: string;
|
|
14
|
+
assetId: string;
|
|
15
|
+
playlistUrl?: string;
|
|
16
|
+
pos: number | Range;
|
|
17
|
+
}) => ReturnType;
|
|
18
|
+
setAudioBlockAlign: (align: "left" | "center" | "right") => ReturnType;
|
|
19
|
+
setAudioBlockWidth: (width: number) => ReturnType;
|
|
20
|
+
setAudioBlockCaption: (caption: boolean) => ReturnType;
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
export declare const AudioBlock: import("@tiptap/react").Node<import("../Audio/Audio.js").AudioOptions, any>;
|
|
25
|
+
export default AudioBlock;
|
|
26
|
+
//# sourceMappingURL=AudioBlock.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioBlock.d.ts","sourceRoot":"","sources":["../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,EAAE,MAAM,cAAc,CAAC;AAKtD,OAAO,QAAQ,cAAc,CAAC;IAC5B,UAAU,QAAQ,CAAC,UAAU;QAC3B,UAAU,EAAE;YACV,aAAa,EAAE,CAAC,UAAU,EAAE;gBAC1B,GAAG,EAAE,MAAM,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,OAAO,EAAE,MAAM,CAAC;gBAChB,WAAW,CAAC,EAAE,MAAM,CAAC;aACtB,KAAK,UAAU,CAAC;YACjB,eAAe,EAAE,CAAC,UAAU,EAAE;gBAC5B,GAAG,EAAE,MAAM,CAAC;gBACZ,MAAM,EAAE,MAAM,CAAC;gBACf,OAAO,EAAE,MAAM,CAAC;gBAChB,WAAW,CAAC,EAAE,MAAM,CAAC;gBAErB,GAAG,EAAE,MAAM,GAAG,KAAK,CAAC;aACrB,KAAK,UAAU,CAAC;YACjB,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,KAAK,UAAU,CAAC;YACvE,kBAAkB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,UAAU,CAAC;YAClD,oBAAoB,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,UAAU,CAAC;SACxD,CAAC;KACH;CACF;AAED,eAAO,MAAM,UAAU,6EAkIrB,CAAC;AAEH,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { ReactNodeViewRenderer } from "@tiptap/react";
|
|
3
|
+
import { mergeAttributes } from "@tiptap/core";
|
|
4
|
+
import { AudioBlockView } from "./components/AudioBlockView.js";
|
|
5
|
+
import { Audio } from "../Audio/Audio.js";
|
|
6
|
+
export const AudioBlock = Audio.extend({
|
|
7
|
+
name: "audioBlock",
|
|
8
|
+
group: "block",
|
|
9
|
+
defining: true,
|
|
10
|
+
isolating: true,
|
|
11
|
+
addAttributes () {
|
|
12
|
+
return {
|
|
13
|
+
src: {
|
|
14
|
+
default: "",
|
|
15
|
+
parseHTML: (element)=>element.getAttribute("src"),
|
|
16
|
+
renderHTML: (attributes)=>({
|
|
17
|
+
src: attributes.src
|
|
18
|
+
})
|
|
19
|
+
},
|
|
20
|
+
poster: {
|
|
21
|
+
default: "",
|
|
22
|
+
parseHTML: (element)=>element.getAttribute("poster"),
|
|
23
|
+
renderHTML: (attributes)=>({
|
|
24
|
+
poster: attributes.poster
|
|
25
|
+
})
|
|
26
|
+
},
|
|
27
|
+
playlistUrl: {
|
|
28
|
+
default: "",
|
|
29
|
+
parseHTML: (element)=>element.getAttribute("data-playlist-url"),
|
|
30
|
+
renderHTML: (attributes)=>({
|
|
31
|
+
"data-playlist-url": attributes.playlistUrl
|
|
32
|
+
})
|
|
33
|
+
},
|
|
34
|
+
width: {
|
|
35
|
+
default: "100%",
|
|
36
|
+
parseHTML: (element)=>element.getAttribute("data-width"),
|
|
37
|
+
renderHTML: (attributes)=>({
|
|
38
|
+
"data-width": attributes.width
|
|
39
|
+
})
|
|
40
|
+
},
|
|
41
|
+
align: {
|
|
42
|
+
default: "center",
|
|
43
|
+
parseHTML: (element)=>element.getAttribute("data-align"),
|
|
44
|
+
renderHTML: (attributes)=>({
|
|
45
|
+
"data-align": attributes.align
|
|
46
|
+
})
|
|
47
|
+
},
|
|
48
|
+
alt: {
|
|
49
|
+
default: undefined,
|
|
50
|
+
parseHTML: (element)=>element.getAttribute("alt"),
|
|
51
|
+
renderHTML: (attributes)=>({
|
|
52
|
+
alt: attributes.alt
|
|
53
|
+
})
|
|
54
|
+
},
|
|
55
|
+
caption: {
|
|
56
|
+
default: true,
|
|
57
|
+
parseHTML: (element)=>element.getAttribute("data-caption") === "true",
|
|
58
|
+
renderHTML: (attributes)=>({
|
|
59
|
+
"data-caption": attributes.caption
|
|
60
|
+
})
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
},
|
|
64
|
+
parseHTML () {
|
|
65
|
+
return [
|
|
66
|
+
{
|
|
67
|
+
tag: 'audio[src*="tiptap.dev"]:not([src^="data:"]), audio[src*="windows.net"]:not([src^="data:"])'
|
|
68
|
+
}
|
|
69
|
+
];
|
|
70
|
+
},
|
|
71
|
+
renderHTML ({ HTMLAttributes }) {
|
|
72
|
+
return [
|
|
73
|
+
"audio",
|
|
74
|
+
mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)
|
|
75
|
+
];
|
|
76
|
+
},
|
|
77
|
+
addCommands () {
|
|
78
|
+
return {
|
|
79
|
+
setAudioBlock: (attrs)=>({ commands })=>{
|
|
80
|
+
return commands.insertContent({
|
|
81
|
+
type: "audioBlock",
|
|
82
|
+
attrs: {
|
|
83
|
+
src: attrs.src,
|
|
84
|
+
poster: attrs.poster,
|
|
85
|
+
assetId: attrs.assetId,
|
|
86
|
+
playlistUrl: attrs.playlistUrl
|
|
87
|
+
}
|
|
88
|
+
});
|
|
89
|
+
},
|
|
90
|
+
setAudioBlockAt: (attrs)=>({ commands })=>{
|
|
91
|
+
return commands.insertContentAt(attrs.pos, {
|
|
92
|
+
type: "audioBlock",
|
|
93
|
+
attrs: {
|
|
94
|
+
src: attrs.src,
|
|
95
|
+
poster: attrs.poster,
|
|
96
|
+
assetId: attrs.assetId,
|
|
97
|
+
playlistUrl: attrs.playlistUrl
|
|
98
|
+
}
|
|
99
|
+
});
|
|
100
|
+
},
|
|
101
|
+
setAudioBlockAlign: (align)=>({ commands })=>commands.updateAttributes("audioBlock", {
|
|
102
|
+
align
|
|
103
|
+
}),
|
|
104
|
+
setAudioBlockWidth: (width)=>({ commands })=>commands.updateAttributes("audioBlock", {
|
|
105
|
+
width: `${Math.max(0, Math.min(100, width))}%`
|
|
106
|
+
}),
|
|
107
|
+
setAudioBlockCaption: (caption)=>({ commands })=>commands.updateAttributes("audioBlock", {
|
|
108
|
+
caption
|
|
109
|
+
})
|
|
110
|
+
};
|
|
111
|
+
},
|
|
112
|
+
addNodeView () {
|
|
113
|
+
return ReactNodeViewRenderer(AudioBlockView);
|
|
114
|
+
}
|
|
115
|
+
});
|
|
116
|
+
export default AudioBlock;
|
|
117
|
+
|
|
118
|
+
//# sourceMappingURL=AudioBlock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/AudioBlock.ts"],"sourcesContent":["\"use client\";\n\nimport { ReactNodeViewRenderer } from \"@tiptap/react\";\nimport { mergeAttributes, Range } from \"@tiptap/core\";\n\nimport { AudioBlockView } from \"./components/AudioBlockView.js\";\nimport { Audio } from \"../Audio/Audio.js\";\n\ndeclare module \"@tiptap/core\" {\n interface Commands<ReturnType> {\n audioBlock: {\n setAudioBlock: (attributes: {\n src: string;\n poster: string;\n assetId: string;\n playlistUrl?: string;\n }) => ReturnType;\n setAudioBlockAt: (attributes: {\n src: string;\n poster: string;\n assetId: string;\n playlistUrl?: string;\n\n pos: number | Range;\n }) => ReturnType;\n setAudioBlockAlign: (align: \"left\" | \"center\" | \"right\") => ReturnType;\n setAudioBlockWidth: (width: number) => ReturnType;\n setAudioBlockCaption: (caption: boolean) => ReturnType;\n };\n }\n}\n\nexport const AudioBlock = Audio.extend({\n name: \"audioBlock\",\n\n group: \"block\",\n\n defining: true,\n\n isolating: true,\n\n addAttributes() {\n return {\n src: {\n default: \"\",\n parseHTML: (element) => element.getAttribute(\"src\"),\n renderHTML: (attributes) => ({\n src: attributes.src,\n }),\n },\n poster: {\n default: \"\",\n parseHTML: (element) => element.getAttribute(\"poster\"),\n renderHTML: (attributes) => ({\n poster: attributes.poster,\n }),\n },\n playlistUrl: {\n default: \"\",\n parseHTML: (element) => element.getAttribute(\"data-playlist-url\"),\n renderHTML: (attributes) => ({\n \"data-playlist-url\": attributes.playlistUrl,\n }),\n },\n width: {\n default: \"100%\",\n parseHTML: (element) => element.getAttribute(\"data-width\"),\n renderHTML: (attributes) => ({\n \"data-width\": attributes.width,\n }),\n },\n align: {\n default: \"center\",\n parseHTML: (element) => element.getAttribute(\"data-align\"),\n renderHTML: (attributes) => ({\n \"data-align\": attributes.align,\n }),\n },\n alt: {\n default: undefined,\n parseHTML: (element) => element.getAttribute(\"alt\"),\n renderHTML: (attributes) => ({\n alt: attributes.alt,\n }),\n },\n caption: {\n default: true,\n parseHTML: (element) => element.getAttribute(\"data-caption\") === \"true\",\n renderHTML: (attributes) => ({\n \"data-caption\": attributes.caption,\n }),\n },\n };\n },\n\n parseHTML() {\n return [\n {\n tag: 'audio[src*=\"tiptap.dev\"]:not([src^=\"data:\"]), audio[src*=\"windows.net\"]:not([src^=\"data:\"])',\n },\n ];\n },\n\n renderHTML({ HTMLAttributes }) {\n return [\n \"audio\",\n mergeAttributes(this.options.HTMLAttributes, HTMLAttributes),\n ];\n },\n\n addCommands() {\n return {\n setAudioBlock:\n (attrs) =>\n ({ commands }) => {\n return commands.insertContent({\n type: \"audioBlock\",\n attrs: {\n src: attrs.src,\n poster: attrs.poster,\n assetId: attrs.assetId,\n playlistUrl: attrs.playlistUrl,\n },\n });\n },\n\n setAudioBlockAt:\n (attrs) =>\n ({ commands }) => {\n return commands.insertContentAt(attrs.pos, {\n type: \"audioBlock\",\n attrs: {\n src: attrs.src,\n poster: attrs.poster,\n assetId: attrs.assetId,\n playlistUrl: attrs.playlistUrl,\n },\n });\n },\n\n setAudioBlockAlign:\n (align) =>\n ({ commands }) =>\n commands.updateAttributes(\"audioBlock\", { align }),\n\n setAudioBlockWidth:\n (width) =>\n ({ commands }) =>\n commands.updateAttributes(\"audioBlock\", {\n width: `${Math.max(0, Math.min(100, width))}%`,\n }),\n\n setAudioBlockCaption:\n (caption) =>\n ({ commands }) =>\n commands.updateAttributes(\"audioBlock\", { caption }),\n };\n },\n\n addNodeView() {\n return ReactNodeViewRenderer(AudioBlockView);\n },\n});\n\nexport default AudioBlock;\n"],"names":["ReactNodeViewRenderer","mergeAttributes","AudioBlockView","Audio","AudioBlock","extend","name","group","defining","isolating","addAttributes","src","default","parseHTML","element","getAttribute","renderHTML","attributes","poster","playlistUrl","width","align","alt","undefined","caption","tag","HTMLAttributes","options","addCommands","setAudioBlock","attrs","commands","insertContent","type","assetId","setAudioBlockAt","insertContentAt","pos","setAudioBlockAlign","updateAttributes","setAudioBlockWidth","Math","max","min","setAudioBlockCaption","addNodeView"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioBlockMenu.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAWvD,OAAO,EAAE,SAAS,EAAE,MAAM,kCAAkC,CAAC;AAM7D,eAAO,MAAM,cAAc,yBAA0B,SAAS,KAAG,SAqIhE,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { BubbleMenu as BaseBubbleMenu } from "@tiptap/react";
|
|
3
|
+
import { useCallback, useRef } from "react";
|
|
4
|
+
import { sticky } from "tippy.js";
|
|
5
|
+
import { v4 as uuid } from "uuid";
|
|
6
|
+
import { AlignHorizontalDistributeCenter, AlignHorizontalDistributeEnd, AlignHorizontalDistributeStart, Pencil, PencilOff } from "lucide-react";
|
|
7
|
+
import { Icon } from "../../../features/ui/Icon.js";
|
|
8
|
+
import { Toolbar } from "../../../features/ui/Toolbar.js";
|
|
9
|
+
import { getRenderContainer } from "../../../lib/utils/index.js";
|
|
10
|
+
import { AudioBlockWidth } from "./AudioBlockWidth.js";
|
|
11
|
+
export const AudioBlockMenu = ({ editor, appendTo })=>{
|
|
12
|
+
const menuRef = useRef(null);
|
|
13
|
+
const tippyInstance = useRef(null);
|
|
14
|
+
const getReferenceClientRect = useCallback(()=>{
|
|
15
|
+
const renderContainer = getRenderContainer(editor, "node-audioBlock");
|
|
16
|
+
const rect = renderContainer?.getBoundingClientRect() || new DOMRect(-1000, -1000, 0, 0);
|
|
17
|
+
return rect;
|
|
18
|
+
}, [
|
|
19
|
+
editor
|
|
20
|
+
]);
|
|
21
|
+
const shouldShow = useCallback(()=>{
|
|
22
|
+
const isActive = editor.isActive("audioBlock");
|
|
23
|
+
return isActive;
|
|
24
|
+
}, [
|
|
25
|
+
editor
|
|
26
|
+
]);
|
|
27
|
+
const onAlignAudioLeft = useCallback(()=>{
|
|
28
|
+
editor.chain().focus(undefined, {
|
|
29
|
+
scrollIntoView: false
|
|
30
|
+
}).setAudioBlockAlign("left").run();
|
|
31
|
+
}, [
|
|
32
|
+
editor
|
|
33
|
+
]);
|
|
34
|
+
const onAlignAudioCenter = useCallback(()=>{
|
|
35
|
+
editor.chain().focus(undefined, {
|
|
36
|
+
scrollIntoView: false
|
|
37
|
+
}).setAudioBlockAlign("center").run();
|
|
38
|
+
}, [
|
|
39
|
+
editor
|
|
40
|
+
]);
|
|
41
|
+
const onAlignAudioRight = useCallback(()=>{
|
|
42
|
+
editor.chain().focus(undefined, {
|
|
43
|
+
scrollIntoView: false
|
|
44
|
+
}).setAudioBlockAlign("right").run();
|
|
45
|
+
}, [
|
|
46
|
+
editor
|
|
47
|
+
]);
|
|
48
|
+
const onHideCaption = useCallback(()=>{
|
|
49
|
+
editor.chain().focus(undefined, {
|
|
50
|
+
scrollIntoView: false
|
|
51
|
+
}).setAudioBlockCaption(editor.isActive("audioBlock", {
|
|
52
|
+
caption: false
|
|
53
|
+
}) ? true : false).run();
|
|
54
|
+
}, [
|
|
55
|
+
editor
|
|
56
|
+
]);
|
|
57
|
+
const onWidthChange = useCallback((value)=>{
|
|
58
|
+
editor.chain().focus(undefined, {
|
|
59
|
+
scrollIntoView: false
|
|
60
|
+
}).setAudioBlockWidth(value).run();
|
|
61
|
+
}, [
|
|
62
|
+
editor
|
|
63
|
+
]);
|
|
64
|
+
return /*#__PURE__*/ _jsx(BaseBubbleMenu, {
|
|
65
|
+
editor: editor,
|
|
66
|
+
pluginKey: `audioBlockMenu-${uuid()}`,
|
|
67
|
+
shouldShow: shouldShow,
|
|
68
|
+
updateDelay: 0,
|
|
69
|
+
tippyOptions: {
|
|
70
|
+
offset: [
|
|
71
|
+
0,
|
|
72
|
+
8
|
|
73
|
+
],
|
|
74
|
+
popperOptions: {
|
|
75
|
+
modifiers: [
|
|
76
|
+
{
|
|
77
|
+
name: "flip",
|
|
78
|
+
enabled: false
|
|
79
|
+
}
|
|
80
|
+
]
|
|
81
|
+
},
|
|
82
|
+
getReferenceClientRect,
|
|
83
|
+
onCreate: (instance)=>{
|
|
84
|
+
tippyInstance.current = instance;
|
|
85
|
+
},
|
|
86
|
+
appendTo: ()=>{
|
|
87
|
+
return appendTo?.current;
|
|
88
|
+
},
|
|
89
|
+
plugins: [
|
|
90
|
+
sticky
|
|
91
|
+
],
|
|
92
|
+
sticky: "popper"
|
|
93
|
+
},
|
|
94
|
+
children: /*#__PURE__*/ _jsxs(Toolbar.Wrapper, {
|
|
95
|
+
shouldShowContent: shouldShow(),
|
|
96
|
+
ref: menuRef,
|
|
97
|
+
children: [
|
|
98
|
+
/*#__PURE__*/ _jsx(Toolbar.Button, {
|
|
99
|
+
type: "button",
|
|
100
|
+
tooltip: "Hide/Show caption",
|
|
101
|
+
active: editor.isActive("audioBlock", {
|
|
102
|
+
caption: false
|
|
103
|
+
}),
|
|
104
|
+
onClick: onHideCaption,
|
|
105
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
106
|
+
icon: editor.isActive("audioBlock", {
|
|
107
|
+
caption: false
|
|
108
|
+
}) ? PencilOff : Pencil
|
|
109
|
+
})
|
|
110
|
+
}),
|
|
111
|
+
/*#__PURE__*/ _jsx(Toolbar.Button, {
|
|
112
|
+
type: "button",
|
|
113
|
+
tooltip: "Align audio left",
|
|
114
|
+
active: editor.isActive("audioBlock", {
|
|
115
|
+
align: "left"
|
|
116
|
+
}),
|
|
117
|
+
onClick: onAlignAudioLeft,
|
|
118
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
119
|
+
icon: AlignHorizontalDistributeStart
|
|
120
|
+
})
|
|
121
|
+
}),
|
|
122
|
+
/*#__PURE__*/ _jsx(Toolbar.Button, {
|
|
123
|
+
type: "button",
|
|
124
|
+
tooltip: "Align audio center",
|
|
125
|
+
active: editor.isActive("audioBlock", {
|
|
126
|
+
align: "center"
|
|
127
|
+
}),
|
|
128
|
+
onClick: onAlignAudioCenter,
|
|
129
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
130
|
+
icon: AlignHorizontalDistributeCenter
|
|
131
|
+
})
|
|
132
|
+
}),
|
|
133
|
+
/*#__PURE__*/ _jsx(Toolbar.Button, {
|
|
134
|
+
type: "button",
|
|
135
|
+
tooltip: "Align audio right",
|
|
136
|
+
active: editor.isActive("audioBlock", {
|
|
137
|
+
align: "right"
|
|
138
|
+
}),
|
|
139
|
+
onClick: onAlignAudioRight,
|
|
140
|
+
children: /*#__PURE__*/ _jsx(Icon, {
|
|
141
|
+
icon: AlignHorizontalDistributeEnd
|
|
142
|
+
})
|
|
143
|
+
}),
|
|
144
|
+
/*#__PURE__*/ _jsx(Toolbar.Divider, {}),
|
|
145
|
+
/*#__PURE__*/ _jsx(AudioBlockWidth, {
|
|
146
|
+
onChange: onWidthChange,
|
|
147
|
+
value: parseInt(editor.getAttributes("audioBlock").width)
|
|
148
|
+
})
|
|
149
|
+
]
|
|
150
|
+
})
|
|
151
|
+
});
|
|
152
|
+
};
|
|
153
|
+
export default AudioBlockMenu;
|
|
154
|
+
|
|
155
|
+
//# sourceMappingURL=AudioBlockMenu.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockMenu.tsx"],"sourcesContent":["import { BubbleMenu as BaseBubbleMenu } from \"@tiptap/react\";\nimport { ReactNode, useCallback, useRef } from \"react\";\nimport { Instance, sticky } from \"tippy.js\";\nimport { v4 as uuid } from \"uuid\";\n\nimport {\n AlignHorizontalDistributeCenter,\n AlignHorizontalDistributeEnd,\n AlignHorizontalDistributeStart,\n Pencil,\n PencilOff,\n} from \"lucide-react\";\nimport { MenuProps } from \"../../../features/menus/types.js\";\nimport { Icon } from \"../../../features/ui/Icon.js\";\nimport { Toolbar } from \"../../../features/ui/Toolbar.js\";\nimport { getRenderContainer } from \"../../../lib/utils/index.js\";\nimport { AudioBlockWidth } from \"./AudioBlockWidth.js\";\n\nexport const AudioBlockMenu = ({ editor, appendTo }: MenuProps): ReactNode => {\n const menuRef = useRef<HTMLDivElement>(null);\n const tippyInstance = useRef<Instance | null>(null);\n\n const getReferenceClientRect = useCallback(() => {\n const renderContainer = getRenderContainer(editor, \"node-audioBlock\");\n const rect =\n renderContainer?.getBoundingClientRect() ||\n new DOMRect(-1000, -1000, 0, 0);\n\n return rect;\n }, [editor]);\n\n const shouldShow = useCallback(() => {\n const isActive = editor.isActive(\"audioBlock\");\n\n return isActive;\n }, [editor]);\n\n const onAlignAudioLeft = useCallback(() => {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .setAudioBlockAlign(\"left\")\n .run();\n }, [editor]);\n\n const onAlignAudioCenter = useCallback(() => {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .setAudioBlockAlign(\"center\")\n .run();\n }, [editor]);\n\n const onAlignAudioRight = useCallback(() => {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .setAudioBlockAlign(\"right\")\n .run();\n }, [editor]);\n\n const onHideCaption = useCallback(() => {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .setAudioBlockCaption(\n editor.isActive(\"audioBlock\", { caption: false }) ? true : false\n )\n .run();\n }, [editor]);\n\n const onWidthChange = useCallback(\n (value: number) => {\n editor\n .chain()\n .focus(undefined, { scrollIntoView: false })\n .setAudioBlockWidth(value)\n .run();\n },\n [editor]\n );\n\n return (\n <BaseBubbleMenu\n editor={editor}\n pluginKey={`audioBlockMenu-${uuid()}`}\n shouldShow={shouldShow}\n updateDelay={0}\n tippyOptions={{\n offset: [0, 8],\n popperOptions: {\n modifiers: [{ name: \"flip\", enabled: false }],\n },\n getReferenceClientRect,\n onCreate: (instance: Instance) => {\n tippyInstance.current = instance;\n },\n appendTo: () => {\n return appendTo?.current;\n },\n plugins: [sticky],\n sticky: \"popper\",\n }}\n >\n <Toolbar.Wrapper shouldShowContent={shouldShow()} ref={menuRef}>\n <Toolbar.Button\n type=\"button\"\n tooltip=\"Hide/Show caption\"\n active={editor.isActive(\"audioBlock\", { caption: false })}\n onClick={onHideCaption}\n >\n <Icon\n icon={\n editor.isActive(\"audioBlock\", { caption: false })\n ? PencilOff\n : Pencil\n }\n />\n </Toolbar.Button>\n <Toolbar.Button\n type=\"button\"\n tooltip=\"Align audio left\"\n active={editor.isActive(\"audioBlock\", { align: \"left\" })}\n onClick={onAlignAudioLeft}\n >\n <Icon icon={AlignHorizontalDistributeStart} />\n </Toolbar.Button>\n <Toolbar.Button\n type=\"button\"\n tooltip=\"Align audio center\"\n active={editor.isActive(\"audioBlock\", { align: \"center\" })}\n onClick={onAlignAudioCenter}\n >\n <Icon icon={AlignHorizontalDistributeCenter} />\n </Toolbar.Button>\n <Toolbar.Button\n type=\"button\"\n tooltip=\"Align audio right\"\n active={editor.isActive(\"audioBlock\", { align: \"right\" })}\n onClick={onAlignAudioRight}\n >\n <Icon icon={AlignHorizontalDistributeEnd} />\n </Toolbar.Button>\n <Toolbar.Divider />\n <AudioBlockWidth\n onChange={onWidthChange}\n value={parseInt(editor.getAttributes(\"audioBlock\").width)}\n />\n </Toolbar.Wrapper>\n </BaseBubbleMenu>\n );\n};\n\nexport default AudioBlockMenu;\n"],"names":["BubbleMenu","BaseBubbleMenu","useCallback","useRef","sticky","v4","uuid","AlignHorizontalDistributeCenter","AlignHorizontalDistributeEnd","AlignHorizontalDistributeStart","Pencil","PencilOff","Icon","Toolbar","getRenderContainer","AudioBlockWidth","AudioBlockMenu","editor","appendTo","menuRef","tippyInstance","getReferenceClientRect","renderContainer","rect","getBoundingClientRect","DOMRect","shouldShow","isActive","onAlignAudioLeft","chain","focus","undefined","scrollIntoView","setAudioBlockAlign","run","onAlignAudioCenter","onAlignAudioRight","onHideCaption","setAudioBlockCaption","caption","onWidthChange","value","setAudioBlockWidth","pluginKey","updateDelay","tippyOptions","offset","popperOptions","modifiers","name","enabled","onCreate","instance","current","plugins","Wrapper","shouldShowContent","ref","Button","type","tooltip","active","onClick","icon","align","Divider","onChange","parseInt","getAttributes","width"],"mappings":"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"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Node } from "@tiptap/pm/model";
|
|
2
|
+
import { Editor } from "@tiptap/react";
|
|
3
|
+
import React from "react";
|
|
4
|
+
interface AudioBlockViewProps {
|
|
5
|
+
editor: Editor;
|
|
6
|
+
getPos: () => number;
|
|
7
|
+
node: Node & {
|
|
8
|
+
attrs: {
|
|
9
|
+
src: string;
|
|
10
|
+
poster: string;
|
|
11
|
+
assetId: string;
|
|
12
|
+
playlistUrl?: string;
|
|
13
|
+
};
|
|
14
|
+
};
|
|
15
|
+
updateAttributes: (attrs: Record<string, string>) => void;
|
|
16
|
+
}
|
|
17
|
+
export type Playlist = {
|
|
18
|
+
id: string;
|
|
19
|
+
title: string;
|
|
20
|
+
description: string;
|
|
21
|
+
poster: string;
|
|
22
|
+
items: Item[];
|
|
23
|
+
};
|
|
24
|
+
export type Item = {
|
|
25
|
+
src: string;
|
|
26
|
+
type: string;
|
|
27
|
+
label: string;
|
|
28
|
+
width: number;
|
|
29
|
+
height: number;
|
|
30
|
+
};
|
|
31
|
+
export declare const AudioBlockView: (props: AudioBlockViewProps) => React.JSX.Element;
|
|
32
|
+
export default AudioBlockView;
|
|
33
|
+
//# sourceMappingURL=AudioBlockView.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioBlockView.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockView.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,MAAM,EAAmB,MAAM,eAAe,CAAC;AACxD,OAAO,KAAkD,MAAM,OAAO,CAAC;AAGvE,UAAU,mBAAmB;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,MAAM,CAAC;IACrB,IAAI,EAAE,IAAI,GAAG;QACX,KAAK,EAAE;YACL,GAAG,EAAE,MAAM,CAAC;YACZ,MAAM,EAAE,MAAM,CAAC;YACf,OAAO,EAAE,MAAM,CAAC;YAChB,WAAW,CAAC,EAAE,MAAM,CAAC;SACtB,CAAC;KACH,CAAC;IACF,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,KAAK,IAAI,CAAC;CAC3D;AAED,MAAM,MAAM,QAAQ,GAAG;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,IAAI,EAAE,CAAC;CACf,CAAC;AAEF,MAAM,MAAM,IAAI,GAAG;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,eAAO,MAAM,cAAc,UAAW,mBAAmB,sBA+BxD,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { NodeViewWrapper } from "@tiptap/react";
|
|
3
|
+
import React, { useCallback, useRef } from "react";
|
|
4
|
+
import { cn } from "../../../lib/utils/index.js";
|
|
5
|
+
export const AudioBlockView = (props)=>{
|
|
6
|
+
const { editor, getPos, node } = props;
|
|
7
|
+
const audioWrapperRef = useRef(null);
|
|
8
|
+
const { src, caption } = node.attrs;
|
|
9
|
+
const wrapperClassName = cn(node.attrs.align === "left" ? "ml-0" : "ml-auto", node.attrs.align === "right" ? "mr-0" : "mr-auto", node.attrs.align === "center" && "mx-auto");
|
|
10
|
+
const onClick = useCallback(()=>{
|
|
11
|
+
editor.commands.setNodeSelection(getPos());
|
|
12
|
+
}, [
|
|
13
|
+
getPos,
|
|
14
|
+
editor.commands
|
|
15
|
+
]);
|
|
16
|
+
return /*#__PURE__*/ _jsx(NodeViewWrapper, {
|
|
17
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
18
|
+
className: wrapperClassName,
|
|
19
|
+
style: {
|
|
20
|
+
width: node.attrs.width
|
|
21
|
+
},
|
|
22
|
+
children: /*#__PURE__*/ _jsx("div", {
|
|
23
|
+
contentEditable: false,
|
|
24
|
+
ref: audioWrapperRef,
|
|
25
|
+
children: /*#__PURE__*/ _jsx("audio", {
|
|
26
|
+
controls: true,
|
|
27
|
+
className: "block",
|
|
28
|
+
src: src,
|
|
29
|
+
//poster={poster}
|
|
30
|
+
title: "",
|
|
31
|
+
onClick: onClick
|
|
32
|
+
})
|
|
33
|
+
})
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
export default AudioBlockView;
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=AudioBlockView.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockView.tsx"],"sourcesContent":["import { Node } from \"@tiptap/pm/model\";\nimport { Editor, NodeViewWrapper } from \"@tiptap/react\";\nimport React, { useCallback, useEffect, useMemo, useRef } from \"react\";\nimport { cn } from \"../../../lib/utils/index.js\";\n\ninterface AudioBlockViewProps {\n editor: Editor;\n getPos: () => number;\n node: Node & {\n attrs: {\n src: string;\n poster: string;\n assetId: string;\n playlistUrl?: string;\n };\n };\n updateAttributes: (attrs: Record<string, string>) => void;\n}\n\nexport type Playlist = {\n id: string;\n title: string;\n description: string;\n poster: string;\n items: Item[];\n};\n\nexport type Item = {\n src: string;\n type: string;\n label: string;\n width: number;\n height: number;\n};\n\nexport const AudioBlockView = (props: AudioBlockViewProps) => {\n const { editor, getPos, node } = props;\n const audioWrapperRef = useRef<HTMLDivElement>(null);\n const { src, caption } = node.attrs;\n\n const wrapperClassName = cn(\n node.attrs.align === \"left\" ? \"ml-0\" : \"ml-auto\",\n node.attrs.align === \"right\" ? \"mr-0\" : \"mr-auto\",\n node.attrs.align === \"center\" && \"mx-auto\"\n );\n\n const onClick = useCallback(() => {\n editor.commands.setNodeSelection(getPos());\n }, [getPos, editor.commands]);\n\n return (\n <NodeViewWrapper>\n <div className={wrapperClassName} style={{ width: node.attrs.width }}>\n <div contentEditable={false} ref={audioWrapperRef}>\n <audio\n controls\n className=\"block\"\n src={src}\n //poster={poster}\n title=\"\"\n onClick={onClick}\n />\n </div>\n </div>\n </NodeViewWrapper>\n );\n};\n\nexport default AudioBlockView;\n"],"names":["NodeViewWrapper","React","useCallback","useRef","cn","AudioBlockView","props","editor","getPos","node","audioWrapperRef","src","caption","attrs","wrapperClassName","align","onClick","commands","setNodeSelection","div","className","style","width","contentEditable","ref","audio","controls","title"],"mappings":";AACA,SAAiBA,eAAe,QAAQ,gBAAgB;AACxD,OAAOC,SAASC,WAAW,EAAsBC,MAAM,QAAQ,QAAQ;AACvE,SAASC,EAAE,QAAQ,8BAA8B;AAgCjD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAE,GAAGH;IACjC,MAAMI,kBAAkBP,OAAuB;IAC/C,MAAM,EAAEQ,GAAG,EAAEC,OAAO,EAAE,GAAGH,KAAKI,KAAK;IAEnC,MAAMC,mBAAmBV,GACvBK,KAAKI,KAAK,CAACE,KAAK,KAAK,SAAS,SAAS,WACvCN,KAAKI,KAAK,CAACE,KAAK,KAAK,UAAU,SAAS,WACxCN,KAAKI,KAAK,CAACE,KAAK,KAAK,YAAY;IAGnC,MAAMC,UAAUd,YAAY;QAC1BK,OAAOU,QAAQ,CAACC,gBAAgB,CAACV;IACnC,GAAG;QAACA;QAAQD,OAAOU,QAAQ;KAAC;IAE5B,qBACE,KAACjB;kBACC,cAAA,KAACmB;YAAIC,WAAWN;YAAkBO,OAAO;gBAAEC,OAAOb,KAAKI,KAAK,CAACS,KAAK;YAAC;sBACjE,cAAA,KAACH;gBAAII,iBAAiB;gBAAOC,KAAKd;0BAChC,cAAA,KAACe;oBACCC,QAAQ;oBACRN,WAAU;oBACVT,KAAKA;oBACL,iBAAiB;oBACjBgB,OAAM;oBACNX,SAASA;;;;;AAMrB,EAAE;AAEF,eAAeX,eAAe"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
export type AudioBlockWidthProps = {
|
|
3
|
+
onChange: (value: number) => void;
|
|
4
|
+
value: number;
|
|
5
|
+
};
|
|
6
|
+
export declare const AudioBlockWidth: React.MemoExoticComponent<({ onChange, value }: AudioBlockWidthProps) => React.JSX.Element>;
|
|
7
|
+
//# sourceMappingURL=AudioBlockWidth.d.ts.map
|
package/dist/src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockWidth.d.ts.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AudioBlockWidth.d.ts","sourceRoot":"","sources":["../../../../../../../src/fields/TiptapEditor/extensions/AudioBlock/components/AudioBlockWidth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAiD,MAAM,OAAO,CAAC;AAEtE,MAAM,MAAM,oBAAoB,GAAG;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,eAAO,MAAM,eAAe,kDACJ,oBAAoB,uBA+B3C,CAAC"}
|